/*
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-05-07 21:09:45
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-05-09 17:17:22
 * @FilePath: \Webgl-basic\src\6.绘制正三角形.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import {
    initShader,
    createBufferTriangle
} from '../lib/index'
const canvas = document.querySelector('canvas')
//获取webgl上下文
const gl = canvas.getContext('webgl')
//定义点顶点着色器(字符串)
const vs_shader = /*glsl*/`
  // 指定浮点数精度为中等精度  
  precision mediump float;//glsl语法每一行后面都要加上分号,每一行后面都要加上分号
  attribute vec4 a_Position;
  attribute vec2 canvas_size;
  varying vec2 v_size;
  //glsl语法中,必须有一个入口函数main shaderToy里面叫mainImage cesuim里面可能叫czm_Main
  void main(){
    //gl_Position 是最后输出的坐标值,Vect4是四维向量,具有四个分量,每一个分量都是float
    gl_Position=a_Position;
    v_size = canvas_size;

  }`
  //片元着色器
const fs_shader = /*glsl*/`
precision mediump float;
varying vec2 v_size;
void main(){
    //gl_FragColor是最后输出的像素颜色,是一个四维的数据
    //gl_FragCoord代表当前渲染像素点的坐标x,y
    float x = gl_FragCoord.x / v_size.x;
    float y = gl_FragCoord.y / v_size.y;
    gl_FragColor = vec4(x,y,0.0,1.0);            
}`
//编译着色器,生成程序对象  操作手，专门负责javaScript和shader着色器的通讯
const program = initShader(gl,vs_shader,fs_shader)
gl.program = program
let points=  new Float32Array([0.0,0.5,-0.5,-0.5,0.5,-0.5])
// const a_Position = gl.getAttribLocation(program,'a_Position')
// gl.clear(gl.COLOR_BUFFER_BIT)
// //创建缓冲区
// const buffer = gl.createBuffer()
// //给定缓冲区的用途
// gl.bindBuffer(gl.ARRAY_BUFFER,buffer)
// //向ARRY_BUFFER中写入数据
// gl.bufferData(gl.ARRAY_BUFFER,points,gl.STATIC_DRAW)
//指定gpu如何去缓冲区中取值
// target,大小,数据类型,是否归一化,步长,偏移值
// gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,2*4,0)
// gl.enableVertexAttribArray(a_Position)        
// //执行绘制
// gl.drawArrays(gl.TRIANGLES,0,3)
const n = createBufferTriangle(gl,points,'a_Position')
const canvas_size = gl.getAttribLocation(program,'canvas_size')
gl.vertexAttrib2f(canvas_size,canvas.width,canvas.height)
gl.drawArrays(gl.TRIANGLES,0,n)
